import { size, IFormProps, pageSize, dateTimeFormat, formItemLayout, getUploadResult, uploadUrl, tailFormItemLayoutLeft, tailFormItemLayout, getFileList, getImages, dateFormat, getToken } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select, message, Tabs, InputNumber, Checkbox } from 'antd';
import moment from 'moment';
const Styles = require("../../styles/index.less");
import queryString from 'query-string';
import * as api from '../../api/api';
import OrderSentEdit from "../../components/orders/OrderSentEdit";
const TabPane = Tabs.TabPane;

export interface IOrderPros extends IFormProps {
    order: any
}
class Order extends React.PureComponent<IOrderPros, any>{
    constructor(props) {
        super(props);
    }

    state = {
        visible: false
    }

    componentDidMount() {
        this.search();
    }

    search = () => {
        this.getOrder();
    }

    getOrder = () => {
        const { id } = queryString.parse(this.props.location.search);
        if (id) {
            this.props.dispatch({
                type: "order/getOrder",
                payload: {
                    id
                }
            });
        }
        else {
            message.error('缺少id参数')
        }
    }

    reset = () => {
        this.props.form.resetFields();
    }

    setOrderSent = () => {
        this.setState({ visible: true });
    }

    setOrderSentCancel = () => {
        this.setState({ visible: false });
    }

    saveOrderSent = (form) => {
        const { id } = this.props.order.order;
        form = Object.assign({}, form, { id });
        this.props.dispatch({
            type: "order/setOrderSent",
            payload: {
                form,
                callback: () => {
                    message.success('订单已发货');
                    this.setOrderSentCancel();
                    this.getOrder();
                }
            }
        })
    }

    setOrderReceived = () => {
        const { id } = this.props.order.order;
        this.props.dispatch({
            type: "order/setOrderReceived",
            payload: {
                form: { id },
                callback: () => {
                    message.success('订单已收货');
                    this.getOrder();
                }
            }
        })
    }

    render(): JSX.Element {
        //console.log(this.props);
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { order = {} } = this.props.order;
        const { orderDetails = [], shippingLogInfo } = order;
        const { result = {} } = shippingLogInfo || {};
        const { list = [] } = result || {};
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="订单信息" key="1">
                            <Col span={24}>
                                <Form>
                                    <Form.Item label="订单编号" {...formItemLayout}>
                                        {order.orderNo}
                                    </Form.Item>
                                    <Form.Item label="订单明细" {...formItemLayout}>
                                        <Table
                                            dataSource={orderDetails}
                                            bordered
                                            pagination={false}
                                            rowKey={(record: api.SingleUserMallOrdersVOOrderDetailVO) => String(record.id)}
                                            loading={loading}
                                        >
                                            <Table.Column title="序号" key="no" render={(text, record, index) => {
                                                return index + 1
                                            }} />
                                            <Table.Column title="商品名称" key="name" dataIndex="name" />
                                            <Table.Column title="商品图片" key="picture" render={(text, record: api.SingleUserMallOrdersVOOrderDetailVO, index) => {
                                                return <img width='100px' src={record.picture} />
                                            }} />
                                            <Table.Column title="规格" key="spec" dataIndex="spec" />
                                            <Table.Column title="单价" key="price" dataIndex="price" />
                                            <Table.Column title="数量" key="qty" dataIndex="qty" />
                                        </Table>
                                    </Form.Item>
                                    <Form.Item label="支付总额" {...formItemLayout}>
                                        {order.actualAmount}
                                    </Form.Item>
                                    <Form.Item label="配送方式" {...formItemLayout}>
                                        {order.shippingTypeView}
                                    </Form.Item>
                                    <Form.Item label="运费" {...formItemLayout}>
                                        {order.freight}
                                    </Form.Item>
                                    <Form.Item label="使用优惠券金额" {...formItemLayout}>
                                        {order.couponAmount}
                                    </Form.Item>
                                    <Form.Item label="收货人" {...formItemLayout}>
                                        {order.receiver}
                                    </Form.Item>
                                    <Form.Item label="收货人电话" {...formItemLayout}>
                                        {order.receiverPhone}
                                    </Form.Item>
                                    <Form.Item label="收货人地址" {...formItemLayout}>
                                        {order.receiverAddress}
                                    </Form.Item>
                                    <Form.Item label="买家留言" {...formItemLayout}>
                                        {order.message}
                                    </Form.Item>
                                    <Form.Item label="订单状态" {...formItemLayout}>
                                        {order.statusView}
                                    </Form.Item>
                                    <Form.Item label="支付方式" {...formItemLayout}>
                                        {order.payTypeView}
                                    </Form.Item>
                                    <Form.Item label="支付时间" {...formItemLayout}>
                                        {order.payTime && moment(order.payTime).format(dateTimeFormat)}
                                    </Form.Item>
                                    {
                                        order.status >= 3 ? (
                                            <Form.Item label="发货时间" {...formItemLayout}>
                                                {moment(order.shippingTime).format(dateTimeFormat)}
                                            </Form.Item>
                                        ) : (null)
                                    }
                                    {
                                        order.status >= 3 ? (
                                            <Form.Item label="快递单号" {...formItemLayout}>
                                                {order.shippingNo}
                                            </Form.Item>
                                        ) : (null)
                                    }
                                    {
                                        order.status >= 3 ? (
                                            <Form.Item label="物流信息" {...formItemLayout}>
                                                <Table
                                                    dataSource={list}
                                                    bordered
                                                    pagination={false}
                                                    loading={loading}
                                                >
                                                    <Table.Column title="序号" key="no" render={(text, record, index) => {
                                                        return index + 1
                                                    }} />
                                                    <Table.Column title="时间" key="time" dataIndex='time' />
                                                    <Table.Column title="状态" key="status" dataIndex="status" />
                                                </Table>
                                            </Form.Item>
                                        ) : (null)
                                    }
                                    {
                                        order.status >= 4 ? (
                                            <Form.Item label="收货时间" {...formItemLayout}>
                                                {moment(order.receiveTime).format(dateTimeFormat)}
                                            </Form.Item>
                                        ) : (null)
                                    }
                                    <Form.Item {...tailFormItemLayout}>
                                        {
                                            order.status == 2 ? (<Button size={size} loading={loading} type="primary" className={Styles.M_RIGHT} onClick={this.setOrderSent}>确认发货</Button>) : (null)
                                        }
                                        {
                                            order.status == 3 ? (<Button size={size} loading={loading} type="primary" className={Styles.M_RIGHT} onClick={this.setOrderReceived}>确认收货</Button>) : (null)
                                        }
                                        <Button size={size} onClick={this.props.history.goBack}>取消</Button>
                                    </Form.Item>
                                </Form>
                            </Col>
                        </TabPane>
                    </Tabs>
                </Row>
                {/* <OrderSentEdit visible={this.state.visible}
                    onSave={this.saveOrderSent}
                    onCancel={this.setOrderSentCancel}
                /> */}
            </Row>)
    }
}

export default connect(({ order, loading: { models: { order: loading } } }) => ({ order, loading }))(Form.create()(Order));
